<template>
  <div class="main-container">
    <!-- 顶部导航 -->
    <nav-header ref="nav"></nav-header>
    <div class="content-container" ref="content">
      <div>
        <!-- 公告提示 -->
        <tip-text ref="tip"></tip-text>
        <!-- 店铺信息 -->
        <shop-info ref="shop"></shop-info>

        <!-- 商品联动列表 -->
        <product-list @scroll-to-list='scrollToList' ref='productList'></product-list>
        <!-- 购物车列表 -->
        <product-car ref="productCarList"></product-car>
        <!-- 下单悬浮窗 -->
        <order-bar @show-car-list='showCarList'></order-bar>
      </div>
    </div>
  </div>
</template>

<script>
import NavHeader from "../components/NavHeader.vue";
import TipText from "../components/TipText.vue";
import ShopInfo from "../components/ShopInfo.vue";
import ProductList from "../components/ProductList.vue";
import ProductCar from "../components/ProductsCar.vue";
import OrderBar from "../components/OrderBar.vue";
// import BScroll from '@better-scroll/core';

export default {
  components: {
    NavHeader,
    TipText,
    ShopInfo,
    ProductList,
    ProductCar,
    OrderBar,
  },
  data() {
    return {
      
    };
  },
  mounted() {},
  methods: {
    scrollToList() {
      // console.log('滚动到列表位置');
      // const contentRef = this.$refs.content;
      // let bs = new BScroll(contentRef, {
      //   probeType: 3,
      //   click: true,
      //   bounce: false
      // });
      // bs.scrollToElement(this.$refs.productList);
    },
    // 购物车无商品时  不显示购物车列表
		showCarList() {
			if(!this.$store.state.selectedProducts.length) {
				return
			}
			this.$refs.productCarList.showCarList();
		}
  },
	destroyed() {
		// 组件销毁时  移除事件
		const contentRef = this.$refs.content;
		contentRef.removeEventListener("scroll", this.scrollCallBack);
	},
};
</script>

<style scoped>
.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.content-container {
  flex: 1;
  overflow-y: auto;
}
.fixed {
  position: fixed;
  left: 0;
  top: 88px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
</style>
